<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告列表 - AI Collections</title>
    <link rel="stylesheet" href="/ai-collections/static/css/style.css">
    <link rel="icon" type="image/png" href="/ai-collections/static/images/logo.png">
    <style>
        .notice-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

        .page-title {
            margin-bottom: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notice-card {
            background-color: var(--card-background);
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .notice-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .notice-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .notice-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .notice-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.875rem;
            color: var(--text-light);
        }

        .notice-preview {
            padding: 1.5rem;
            color: var(--text-color);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .notice-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
        }

        .notice-empty {
            text-align: center;
            padding: 3rem 0;
            color: var(--text-light);
        }

        .btn-group {
            display: flex;
            gap: 0.5rem;
        }

        .btn-new {
            background-color: var(--primary-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            transition: background-color 0.2s ease;
        }

        .btn-new:hover {
            background-color: var(--primary-dark);
        }

        .btn-view {
            background-color: var(--background-color);
            color: var(--text-color);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            transition: background-color 0.2s ease;
        }

        .btn-view:hover {
            background-color: var(--border-color);
        }
        
        /* 系统配置按钮样式 */
        .btn-config {
            background-color: #4a6bdf;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            transition: background-color 0.2s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-config:hover {
            background-color: #3a5bcf;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: var(--card-background);
            border-radius: 1rem;
            padding: 2rem;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-color);
        }
        
        .modal-close {
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            color: var(--text-light);
            background: none;
            border: none;
        }
        
        .modal-body {
            margin-bottom: 1.5rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #4a88e5;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        /* 提示样式 */
        .toast-container {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
        }
        
        .toast {
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 0.25rem;
            color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            animation: slideIn 0.3s ease-out forwards;
        }
        
        .toast.success {
            background-color: #28a745;
        }
        
        .toast.error {
            background-color: #dc3545;
        }
        
        .toast.warning {
            background-color: #ffc107;
            color: #212529;
        }
        
        .toast.info {
            background-color: #17a2b8;
        }
        
        @keyframes slideIn {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(0);
            }
        }
        
        @keyframes slideOut {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100%);
            }
        }

        /* 添加删除按钮样式 */
        .btn-delete {
            background-color: #dc3545;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            transition: background-color 0.2s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-delete:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
    <div id="toastContainer" class="toast-container"></div>

    <header class="header">
        <div class="logo">
            <img src="/ai-collections/static/images/logo.png" alt="Logo" class="logo-img">
            <span>AI Collections</span>
        </div>
        <nav>
            <a href="/ai-collections/">首页</a>
            <a href="/ai-collections/notice" class="active">公告</a>
        </nav>
        <div class="user-menu">
            <span class="avatar">{{if .UserInfo.IsGuest}}游客{{else}}{{.UserInfo.Username}}{{end}}</span>
        </div>
    </header>

    <div class="notice-container">
        <div class="page-title">
            <h1>系统公告</h1>
            {{if .IsOwner}}
            <div class="btn-group">
                <button id="config-btn-20250501" class="btn-config" onclick="openConfigModal()">系统配置</button>
                <a href="/ai-collections/notice/new" class="btn-new">发布新公告</a>
            </div>
            {{end}}
        </div>

        {{if .Notices}}
            {{range .Notices}}
            <div class="notice-card">
                <div class="notice-header">
                    <h2 class="notice-title">{{.Title}}</h2>
                    <div class="notice-meta">
                        <span>作者: {{.Author}}</span>
                        <span>发布时间: {{.CreatedAt.Format "2006-01-02 15:04:05"}}</span>
                    </div>
                </div>
                <div class="notice-preview">
                    {{.Content}}
                </div>
                <div class="notice-footer">
                    <div class="btn-group">
                        <a href="/ai-collections/notice/{{.ID}}" class="btn-view">查看详情</a>
                        {{if $.IsOwner}}
                        <a href="/ai-collections/notice/edit/{{.ID}}" class="btn-view">编辑</a>
                        <button class="btn-delete" onclick="deleteNotice('{{.ID}}')">删除</button>
                        {{end}}
                    </div>
                </div>
            </div>
            {{end}}
        {{else}}
            <div class="notice-empty">
                <p>暂无公告</p>
            </div>
        {{end}}
    </div>
    
    <!-- 系统配置弹窗 -->
    {{if .IsOwner}}
    <div id="configModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">系统配置</h2>
                <button class="modal-close" onclick="closeConfigModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="showClaude">
                        <span>显示Claude页签</span>
                        <label class="switch">
                            <input type="checkbox" id="showClaude" checked>
                            <span class="slider"></span>
                        </label>
                    </label>
                </div>
                <div class="form-group">
                    <label for="showPlus">
                        <span>显示ChatGPT页签</span>
                        <label class="switch">
                            <input type="checkbox" id="showPlus" checked>
                            <span class="slider"></span>
                        </label>
                    </label>
                </div>
                <div class="form-group">
                    <label for="showFingerprint">
                        <span>显示指纹页签</span>
                        <label class="switch">
                            <input type="checkbox" id="showFingerprint" checked>
                            <span class="slider"></span>
                        </label>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancelConfig" class="btn-view" onclick="closeConfigModal()">取消</button>
                <button id="saveConfig" class="btn-new" onclick="saveSystemConfig()">保存</button>
            </div>
        </div>
    </div>
    {{end}}

    <script>
    function showToast(message, type = 'warning') {
        const container = document.getElementById('toastContainer');
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.textContent = message;
        container.appendChild(toast);

        // 3秒后自动移除
        setTimeout(() => {
            toast.style.animation = 'slideOut 0.3s ease-out forwards';
            setTimeout(() => {
                container.removeChild(toast);
            }, 300);
        }, 3000);
    }
    
    // 打开配置弹窗
    function openConfigModal() {
        console.log('打开配置弹窗');
        
        try {
            // 显示模态框
            document.getElementById('configModal').style.display = 'flex';
            
            // 获取当前配置
            fetch('/ai-collections/api/config')
                .then(response => {
                    console.log('配置API响应状态:', response.status);
                    if (!response.ok) {
                        if (response.status === 403) {
                            throw new Error('无权限访问配置');
                        } else {
                            throw new Error('获取配置失败: ' + response.status);
                        }
                    }
                    return response.json();
                })
                .then(config => {
                    console.log('获取配置成功:', config);
                    
                    // 设置开关状态
                    document.getElementById('showClaude').checked = config.showClaude !== false;
                    document.getElementById('showPlus').checked = config.showPlus !== false;
                    document.getElementById('showFingerprint').checked = config.showFingerprint !== false;
                })
                .catch(error => {
                    console.error('获取配置错误:', error);
                    showToast('获取配置失败: ' + error.message, 'error');
                });
        } catch (error) {
            console.error('弹窗打开错误:', error);
            showToast('弹窗打开失败: ' + error.message, 'error');
        }
    }
    
    // 关闭配置弹窗
    function closeConfigModal() {
        document.getElementById('configModal').style.display = 'none';
    }
    
    // 保存系统配置
    function saveSystemConfig() {
        console.log('保存系统配置');
        
        const config = {
            showClaude: document.getElementById('showClaude').checked,
            showPlus: document.getElementById('showPlus').checked,
            showFingerprint: document.getElementById('showFingerprint').checked
        };
        
        console.log('要保存的配置:', config);
        
        fetch('/ai-collections/api/config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(config)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('保存配置失败: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            console.log('保存配置响应:', data);
            
            if (data.success) {
                showToast('配置已保存', 'success');
                closeConfigModal();
            } else {
                showToast('保存失败: ' + (data.error || '未知错误'), 'error');
            }
        })
        .catch(error => {
            console.error('保存配置错误:', error);
            showToast('保存失败: ' + error.message, 'error');
        });
    }
    
    // 页面加载后的事件处理
    document.addEventListener('DOMContentLoaded', function() {
        console.log('页面已加载完成');
        
        // 添加点击模态框外部关闭功能
        window.addEventListener('click', function(event) {
            const modal = document.getElementById('configModal');
            if (event.target === modal) {
                closeConfigModal();
            }
        });
        
        // 处理错误提示
        {{if .Error}}
        showToast("{{.Error}}", 'error');
        {{end}}
    });

    // 删除公告
    function deleteNotice(id) {
        if (!confirm('确定要删除此公告吗？此操作不可撤销')) {
            return;
        }
        
        showToast('正在删除公告...', 'info');
        
        fetch('/ai-collections/notice/delete/' + id, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => {
            console.log('删除公告响应状态码:', response.status);
            if (!response.ok) {
                throw new Error('删除公告失败: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            console.log('删除公告响应:', data);
            
            if (data.success) {
                showToast('公告已删除', 'success');
                // 重新加载页面显示最新的公告列表
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                showToast('删除失败: ' + (data.error || '未知错误'), 'error');
            }
        })
        .catch(error => {
            console.error('删除公告错误:', error);
            showToast('删除失败: ' + error.message, 'error');
        });
    }
    </script>
</body>
</html> 